<template>
  <page-wrap stay-still back hide-tab title="模块调整">
    <view>
      <view class="basic title"
        >已在简历中的模块<span class="tip">（上下按钮可调节顺序）</span></view
      >
      <view class="basic module"> 个人资料 </view>

      <view
        class="basic module"
        v-for="(item, index) in list.moduleSortList"
        :key="index"
        >{{ item.moduleName }}
        <view class="iconBox" v-if="item.moduleName != '个人资料'">
          <view
            class="downUpCircle blue"
            @click="ModuleOption(0, index)"
            v-if="index > 0"
            ><u-icon name="arrow-up-fill" color="#fff" size="26"></u-icon
          ></view>
          <view
            class="downUpCircle blue pd"
            @click="ModuleOption(1, index)"
            v-if="index != list.moduleSortList.length - 1"
            ><u-icon name="arrow-down-fill" color="#fff" size="26"></u-icon
          ></view>
          <view class="downUpCircle purple" @click="ModuleOption(2, index)"
            ><u-icon name="minus" color="#fff" size="30"></u-icon
          ></view>
        </view>
      </view>
      <view class="basic title">未在简历中的模块</view>
      <view
        class="basic module"
        v-for="(item, index) in list.moduleHideList"
        :key="index"
        >{{ item.moduleName }}
        <view class="iconBox">
          <view class="downUpCircle green" @click="ModuleOption(3, index)"
            ><u-icon name="plus" color="#fff" size="30"></u-icon
          ></view>
        </view>
      </view>
      <view style="height: 100rpx"></view>
      <view class="produce-btn">
        <view class="preview" @click="clickSave">保存</view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
let moduleListArray = [
  { moduleType: "10", moduleName: "工作经历" },
  { moduleType: "20", moduleName: "教育经历" },
  { moduleType: "30", moduleName: "校园经历" },
  { moduleType: "40", moduleName: "荣誉奖项" },
  { moduleType: "50", moduleName: "自我评价" },
  { moduleType: "60", moduleName: "个人证书" },
  { moduleType: "70", moduleName: "技能特长" },
  { moduleType: "80", moduleName: "项目活动经历" },
  { moduleType: "90", moduleName: "培训经历" },
];
// import html2canvas from 'html2canvas'
import { getModuleSort, updateModuleSort } from "@/api/modules/resumeCreate";

export default {
  data() {
    return {
      timer: "",
      startTime: "",
      list: {
        moduleSortList: [],
        moduleHideList: [],
      },
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
    };
  },
  mounted() {
    this.getModuleSortOnload();
  },
  methods: {
    ModuleOption(type, index) {
      //上下调换位置
      //向上调换
      if (type == 0) {
        console.log("向上");
        this.list.moduleSortList.splice(
          index,
          1,
          ...this.list.moduleSortList.splice(
            index - 1,
            1,
            this.list.moduleSortList[index]
          )
        );
      }
      //向下调换
      if (type == 1) {
        console.log("向上");
        this.list.moduleSortList.splice(
          index,
          1,
          ...this.list.moduleSortList.splice(
            index + 1,
            1,
            this.list.moduleSortList[index]
          )
        );
      }
      if (type == 2) {
        let del = this.list.moduleSortList[index];
        console.log(del);
        this.list.moduleSortList.splice(index, 1);
        this.list.moduleHideList.push(del);
      }
      if (type == 3) {
        let del = this.list.moduleHideList[index];
        this.list.moduleHideList.splice(index, 1);
        this.list.moduleSortList.push(del);
      }
    },
    getModuleSortOnload() {
      getModuleSort({
        personId: this.personId,
      }).then((res) => {
        if (+res.code === 200) {
          this.list.moduleSortList = res.data || [];
          this.list.moduleHideList = moduleListArray.filter((fil) => {
            return !res.data.find((fin) => {
              return fil.moduleType == fin.moduleType;
            });
          });
        }
      });
    },
    clickSave() {
      let array = [];
      this.list.moduleSortList.forEach((item) => {
        array.push(item.moduleType);
      });
      let params = {
        personId: this.personId,
        moduleSortList: array,
      };
      updateModuleSort(params).then((res) => {
        if (+res.code === 200) {
          uni.showToast({
            icon: "none",
            title: "保存成功",
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.basic {
  height: 100rpx;
  width: 100%;
  padding: 0 50rpx;
  background: #fff;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
}
.title {
  font-weight: 600;
  height: 80rpx;
  font-size: 15px;
  color: #fff8f8;
  border-bottom: none;
  background: linear-gradient(45deg, #dc4040, transparent);
  .tip {
    font-size: 14px;
    color: #fff8f8;
  }
}
.module {
  font-size: 16px;
  color: #6d6d6d;
  justify-content: space-between;
  .iconBox {
    display: flex;
    align-items: center;
    justify-content: center;
    .downUpCircle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .blue {
      background: #ff9031;
    }
    .pd {
      padding-top: 3px;
    }
    .purple {
      background: #dc4040;
    }
    .green {
      background: #72a027;
    }
    view {
      margin-left: 26rpx;
    }
  }
}
.produce-btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 32rpx;
  position: fixed;
  bottom: 0rpx;
  font-size: 20px;
  padding-bottom: calc(2rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(2rpx + env(safe-area-inset-bottom));
  .preview {
    width: 76vw;
    text-align: center;
    padding: 20rpx 80rpx;
    margin-left: 32rpx;
    margin-bottom: 50rpx;
    background: #dc4040;
    color: #fff;
    border-radius: 5px;
  }
}
</style>
